<template>
  <el-dialog :draggable=true :model-value="editDialogVisible" title="请输入用户信息" width="500" @close="handleClose">
    <template #footer>
      <div class="dialog-footer">
        <el-form
            ref="ruleFormRef"
            :model="props.userInfo"
            class="demo-ruleForm"
            label-width="auto"
            status-icon
            style="max-width: 600px"
        >
          <el-form-item label="用户名">
            <el-input v-model="props.userInfo.username" placeholder="请输入用户名 (20字符以内)"/>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="props.userInfo.nickname" placeholder="请输入昵称 (10字符以内)"/>
          </el-form-item>
          <el-form-item label="用户角色">
            <el-select
                :disabled="getUserInfo().userId == props.userInfo.userId"
                v-model="props.userInfo.roleId"
                placeholder="Select"
                size="large"
            >
              <el-option
                  v-for="item in roleMap"
                  :key="item.id"
                  :label="item.roleName"
                  :value="Number(item.id)"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import {ref, defineProps, withDefaults, defineEmits} from 'vue'
import type {FormInstance} from 'element-plus'
import {editSysUser} from "@/api/system/sysUser";
import {ElMessage} from "element-plus";
import {getAllRoleList} from "@/api/system/sysRole";
import {message} from "@/utils/ElmessasgeUtils";
import {getUserInfo} from "@/utils/system";

const emit = defineEmits(['update:editDialogVisible', "close"])

const ruleFormRef = ref<FormInstance>()

const roleMap = ref()
getAllRoleList().then((res: any) => {
  if (res.data.code == 200) {
    roleMap.value = res.data.data
    console.log(res.data.data)
  } else {
    message("获取角色列表失败")
  }

})

const props = withDefaults(
    defineProps<{
      userInfo: any
      editDialogVisible: boolean
    }>(),
    {
      editDialogVisible: false
    })

function handleClose() {
  emit('update:editDialogVisible', false)
  emit("close")
}

const submitForm = () => {

  editSysUser(props.userInfo).then(res => {

    if (res.data.code !== 200) {
      ElMessage.error(res.data.msg);
    } else {
      emit('update:editDialogVisible', false)
      emit("close")
    }
  })

}


</script>